//id为tag-input的input元素中监听输入事件，
//当输入换行符时，将已经输入的内容添加到tag-container中
function add_tag() {
    let input = document.getElementById("tag-input");
    let tag_hidden = document.getElementById("tag-hidden");
    let container = document.getElementById("tag-container");
    input.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            event.preventDefault();
            let tag = document.createElement("span");
            tag.classList.add("tag");
            tag.classList.add("is-medium");
            tag.classList.add("is-info");
            tag.classList.add("mr-4");
            tag.innerText = input.value;
            //append input.value to tag-hidden
            tag_hidden.value += input.value + ",";
            //add delete button
            let delete_button = document.createElement("button");
            delete_button.classList.add("delete");
            container.appendChild(tag);
            tag.appendChild(delete_button);
            input.value = "";
        }
    });
    //let tag-container listen all delete button click event
    container.addEventListener("click", function (event) {
        event.preventDefault();
        if (event.target.classList.contains("delete")) {
            //get tag text
            let tag_text = event.target.parentElement.innerText;
            console.log(tag_text);
            //remove tag from tag-hidden
            tag_hidden.value = tag_hidden.value.replace(tag_text + ",", "");
            //remove tag from tag-container
            event.target.parentElement.remove();
        }
    });
}

document.addEventListener("DOMContentLoaded", () => {
    add_tag();
});